<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>文章类型列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/index.js"></script>

</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i></a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
						<form class="layui-form layui-col-space5">
							<div class="layui-inline layui-show-xs-block">
								<input type="text" name="username" placeholder="请输入查询的用户名"
									autocomplete="off" class="layui-input" id="kw">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<button class="layui-btn" lay-submit="" lay-filter="sreach"
									id="select-amb" type="button" onclick="customer_search()">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</form>
					</div>
					<div class="layui-card-header">
						<button class="layui-btn layui-btn-danger" onclick="delAll()">
							<i class="layui-icon"></i>批量删除
						</button>
						<button class="layui-btn"
							onclick="xadmin.open('添加商品','./customer-add.jsp')">
							<i class="layui-icon"></i>添加
						</button>
					</div>
					<div class="layui-card-body layui-table-body layui-table-main">
						<table class="layui-table layui-form" id="customer-table">
							<thead>
								<tr>
									<th><input type="checkbox" lay-filter="checkall" name=""
										lay-skin="primary"></th>
									<th>用户编号</th>
									<th>用户昵称</th>
									<th>用户头像</th>
									<th>手机号</th>
									<th>密码</th>
									<th>状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							
								<tr>
									<td><input type="checkbox" name="id" value="1"   lay-skin="primary"></td>
									<td>1</td>
									<td>xiaopang</td>
									<td>null</td>
									<td>18150623262</td>
									<td>824671935</td>
									<td>1</td>
									<td class="td-manage">
		                                <a style="text-decoration:none" onclick="member_stop(this,'10001')" href="javascript:;" title="停用">
		                                    <i class="layui-icon">&#xe601;</i>
		                                </a>
		                                <a title="编辑" href="javascript:;" onclick="xadmin.open('编辑','articletypeadd.html','800','510','1')"
		                                   class="ml-5" style="text-decoration:none">
		                                    <i class="layui-icon">&#xe642;</i>
		                                </a>
		
		                                <a title="删除" href="javascript:;" onclick="member_del(this,'1')"
		                                   style="text-decoration:none">
		                                    <i class="layui-icon">&#xe640;</i>
		                                </a>
                           		   </td>
								</tr>
	
							</tbody>
						</table>
					</div>

					<div class="layui-card-body ">
						<div class="page">
								<!-- 选择显示条数 -->
								<span class="layui-laypage-limits">
									   <select lay-ignore="" id="select-pageSize" >
									    	<option value="1">1 条/页</option>		
									        <option value="3">3 条/页</option>										
											<option value="5">5 条/页</option>
											<option value="10">10 条/页</option>
										</select>
								</span>
								<!-- 分页信息,后期由脚本动态生成 -->
								<div class="layui-box layui-laypage layui-laypage-default" id="page-info">
								
									<span class="layui-laypage-count">共 100 条</span>
									
									<a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
									<a href="javascript:;" class="layui-laypage-prev" data-page="1">上一页</a>
									
									<span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
									<a href="javascript:;"data-page="2">2</a>
									<a href="javascript:;" data-page="3">3</a>
									<a href="javascript:;" data-page="4">4</a>
									<a href="javascript:;" data-page="5">5</a>
									
									<a href="javascript:;" class="layui-laypage-next" data-page="2">下一页</a>
									<a href="javascript:;" class="layui-laypage-next layui-disabled" data-page="6">下一页</a>
								
									 <span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页
									   	<button type="button" class="layui-laypage-btn">确定</button>
									 </span>
								</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script>
	layui.use([ 'laydate', 'form' ], function() {
		var laydate = layui.laydate;
		var form = layui.form;

		// 监听全选
		form.on('checkbox(checkall)', function(data) {

			if (data.elem.checked) {
				$('tbody input').prop('checked', true);
			} else {
				$('tbody input').prop('checked', false);
			}
			form.render('checkbox');
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#end' //指定元素
		});

	});

	/*用户-添加*/
	function member_add(title, url, id, w, h) {

		xadmin.open(title, url, id, w, h);
	}

	/*用户-停用*/
	function member_stop(obj, id) {
		layer.confirm('确认要停用吗？', {
			icon : 3,
			title : '提示信息'
		}, function(index) {

			if ($(obj).attr('title') == '启用') {

				//发异步把用户状态进行更改
				$(obj).attr('title', '停用')
				$(obj).find('i').html('&#xe62f;');

				$(obj).parents("tr").find(".td-status").find('span').addClass(
						'layui-btn-disabled').html('已停用');
				layer.msg('已停用!', {
					icon : 5,
					time : 1000
				});

			} else {
				$(obj).attr('title', '启用')
				$(obj).find('i').html('&#xe601;');

				$(obj).parents("tr").find(".td-status").find('span')
						.removeClass('layui-btn-disabled').html('已启用');
				layer.msg('已启用!', {
					icon : 5,
					time : 1000
				});
			}

		});
	}

	function delAll(argument) {
		var ids = [];

		// 获取选中的id
		$('tbody input').each(function(index, el) {
			if ($(this).prop('checked')) {
				ids.push($(this).val())
			}
		});

		layer.confirm('确认要删除吗？' + ids.toString(), {
			icon : 3,
			title : '提示信息'
		}, function(index) {
			//捉到所有被选中的，发异步进行删除
			layer.msg('删除成功', {
				icon : 1
			});
			$(".layui-form-checked").not('.header').parents('tr').remove();
		});
	}


</script>

<script>
		// 全局声明页码
		let pageNum = 1; 
		
		// 发起HTTP GET请求,请求服务器获得商品列表
		getCustomerList();
		
		/*商品-搜索按钮*/
		function goods_search() {
			getCustomerList();
		}
		/*选择分页显示记录数*/
		$(document).on("change","#select-pageSize",function(){
			// 设置全局页码变量值
			pageNum = 1; 
			// 调用查询
			getCustomerList();
		});
		
		/*上一页,页码,下一页点击事件*/
		$(document).on("click","#page-info a",function(){
			
			// 获取点击的页码
			let aPageNum = $(this).data("page"); // 获取超链接上面绑定的自定义属性data-page
			// 判断
			if(aPageNum != 0){
				// 设置全局页码变量值
				pageNum = aPageNum;
				// 调用查询
				getCustomerList();
			}
			
		})
		
	    /*页码确认事件*/
	    $(document).on("click","#page-info #search-pageNum",function(){
	    	// 获取最大页码
	    	let maxPageNum = parseInt($("#intput-pageNum").prop("max"));
	    	
	    	// 获取用户输入的页码
	    	let inputPageNum =  parseInt($("#intput-pageNum").val());
	    
	    	// 判断页码是否有效
	    	if(inputPageNum >= 1 && inputPageNum <= maxPageNum){
	    		// 设置全局页码变量值
	    		pageNum = inputPageNum;
	    		// 调用查询
	    		getCustomerList();
	    	}else{
	    		layer.msg('输入页码无效', {
					icon : 5,
					time : 1000
				});
	    	}
			
		})
		
		/*商品-删除*/
	function customer_del(customerId) {
		// 发起HTTP GET请求,请求服务器删除指定商品
		layer.confirm('确认要删除' + customerId + '号用户吗？', {
			icon : 3,
			title : '提示信息'
		}, function(index) {
			//发异步删除数据
			$.get("${pageContext.request.contextPath}/CustomerServlet", {
				op : "deleteCustomerById",
				CustomerId : customerId
			}, function(result) {
				if (result.status == 1) {
					layer.msg('已删除!', {
						icon : 1,
						time : 1000
					});
					getCustomerList();
					// 再次调用商品查询的方法
					
				}
			}, "json");
		});
	}
		/*商品-搜索按钮*/
		function customer_search() {
			getCustomerList();
		}
		
		/*商品-分页查询*/
	function getCustomerList() {

		/*商品分页查询*/
		$.ajax({
					type : "GET",
					url : "${pageContext.request.contextPath}/CustomerServlet",
					data : {
						op : "findCustomerByPage",
						nickNameKeyWord : $("#kw").val(),
						pageNum: pageNum,
						pageSize: $("#select-pageSize").val()
					},
					contentType : "application/x-www-form-urlencoed",
					dataType : "json",
					success : function(result) { // 
						// 处理服务器响应的数据,渲染页面
						// 拼接HTML片段-表格数据
						let content = "";
						// result.data是分页对象信息
						// 迭代响应结果对象中的数据属性data.data
						$.each(result.data.data,function(i, customer) {
											content += "<tr>"
													+ "<td><input type=\"checkbox\" name=\"id\" value=\"1\" lay-skin=\"primary\"></td>"
													+ "<td>"
													+ customer.customerId
													+ "</td>"
													+ "<td>"
													+ customer.nickname
													+ "</td>"
													+ "<td><img src=\"../../FileDownloadServlet?type=image&fileName="
													+ customer.image
													+ "\"/></td>"
													+ "<td>"
													+ customer.mobile
													+ "</td>"
													+ "<td>"
													+ customer.password
													+ "</td>"
													+ "<td>"
													+ (customer.status == 1 ? '正常'
															: '冻结')
													+ "</td>	"
													+ "<td class=\"td-manage\">";


											content += "<a title=\"编辑\" href=\"javascript:;\" onclick=\"xadmin.open('编辑','customer-modify.jsp?customerId="
													+ customer.customerId
													+ "','800','510','1')\" class=\"ml-5\" style=\"text-decoration: none\"> <i class=\"layui-icon\">&#xe642;</i>"
													+ "</a> "
													+ "<a title=\"删除\" href=\"javascript:;\" onclick=\"customer_del('"
													+ customer.customerId
													+ "')\" style=\"text-decoration: none\"> <i class=\"layui-icon\">&#xe640;</i>"
													+ "</a>"
													+ "</td>"
													+ "</tr>";
						});

						// 拼接HTML片段-分页信息
						// 总条数
						let pageInfoContent = "<span class=\"layui-laypage-count\">共 "+result.data.total+" 条</span>";
						// 上一页
						if(result.data.pageNum == 1){
							pageInfoContent += "<a href=\"javascript:;\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\">上一页</a>";
						}else{
							pageInfoContent += "<a href=\"javascript:;\" class=\"layui-laypage-prev\" data-page=\""+(result.data.pageNum-1)+"\">上一页</a>";
						}
						// 页码
						for(let i = 1; i <= result.data.pages;i++){
							if(result.data.pageNum == i){
								pageInfoContent +="<span class=\"layui-laypage-curr\"><em class=\"layui-laypage-em\"></em><em>"+i+"</em></span>";
							}else{
								pageInfoContent +="<a href=\"javascript:;\" data-page=\""+i+"\">"+i+"</a>";
							}
						}
					
 						// 下一页					
						if(result.data.pageNum == result.data.pages){
							pageInfoContent +="<a href=\"javascript:;\" class=\"layui-laypage-next layui-disabled\" data-page=\"0\">下一页</a>";
						}else{
							pageInfoContent +="<a href=\"javascript:;\" class=\"layui-laypage-next\" data-page=\""+(result.data.pageNum+1)+"\">下一页</a>";
						}
						// 搜索页码
						pageInfoContent +=  "<span class=\"layui-laypage-skip\">到第<input type=\"text\" min=\"1\" max=\""+result.data.pages+"\" value=\"1\" class=\"layui-input\" id=\"intput-pageNum\">页"+
						                  	 	"<button type=\"button\" class=\"layui-laypage-btn\" id=\"search-pageNum\">确定</button>"+
						                    "</span>";
						
						
						// 设置表格数据内容在指定DOM元素上
						$("#customer-table tbody").html(content);
						
						// 设置分页信息内容在指定DOM元素上
						$("#page-info").html(pageInfoContent);
						
						
					},
					error : function() {
						alert("异步请求失败");
					}
				});
		}
</script>


</html>